<!-- 编辑弹窗 -->
<template>
  <ele-modal :form="true" :destroy-on-close="true" :width="770" v-model="visible" :title="isUpdate ? '修改' : '修改'">
    <el-form ref="formRef" :inline="true" :model="form" :rules="rules" label-width="120px" @submit.prevent="">
      <el-form-item label="父对象名称" prop="">
        <el-input clearable v-model="form.deptCode" placeholder="" />
      </el-form-item>
      <el-form-item label="父对象代码" prop="">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="行政区划简称" prop="">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="行政区划代码" prop="">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="行敌区划名称" prop="" style="width:91%">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="行政区划编号" prop="">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="代码全路径" prop="" style="width:91%">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="名称全路径" prop="" style="width:91%">
        <el-input clearable v-model="form.deptName" placeholder="" />
      </el-form-item>
      <el-form-item label="是否启用" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio value="M" label="启用" />
          <el-radio value="C" label="不启用" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序号" prop="orderNum"style="width:52%">
        <el-input-number :min="0" :max="99999" v-model="form.orderNum" placeholder="请输入显示排序" controls-position="right"
          class="ele-fluid" />
      </el-form-item>
      <el-form-item label="创建人名称" prop="">
        <el-input clearable v-model="form.deptName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="更新人名称" prop="">
        <el-input clearable v-model="form.deptName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="创建时间" prop="">
        <div class="block">
          <el-date-picker v-model="form.createTime" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="更新时间" prop="">
        <div class="block">
          <el-date-picker v-model="form.value1" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { EleMessage, emailReg, phoneReg } from 'ele-admin-plus';
import { useFormData } from '@/utils/use-form-data';
import AdminiSelect from './admin-select.vue';
import { addDept, updateDept } from '@/api/system/dept';

const props = defineProps({
  /** 修改回显的数据 */
  data: Object,
  /** 上级部门id */
  parentId: Number,
  /** 指定机构下拉数据 */
  organizationData: Array
});

const emit = defineEmits(['done']);

/** 弹窗是否打开 */
const visible = defineModel({ type: Boolean });

/** 是否是修改 */
const isUpdate = ref(false);

/** 提交状态 */
const loading = ref(false);

/** 表单实例 */
const formRef = ref(null);

/** 表单数据 */
const [form, resetFields, assignFields] = useFormData({
  deptId: void 0,
  parentId: void 0,
  deptName: '',
  orderNum: 0,
  leader: '',
  phone: '',
  email: '',
  status: ''
});

/** 表单验证规则 */
const rules = reactive({
  deptCode: [
    {
      required: true,
      message: '请输入编码规则编号',
      type: 'string',
      trigger: 'blur'
    }
  ],
  deptName: [
    {
      required: true,
      message: '请输入编码规则名称',
      type: 'string',
      trigger: 'blur'
    }
  ],


  orderNum: [
    {
      required: true,
      message: '请输入显示排序',
      type: 'number',
      trigger: 'blur'
    }
  ],
  phone: [
    {
      pattern: phoneReg,
      message: '手机号格式不正确',
      type: 'string',
      trigger: 'blur'
    }
  ],
  status: [
    {
       required: true,
      message: '请选择',
      type: 'string',
      trigger: 'blur'
    }
  ]
});

/** 关闭弹窗 */
const handleCancel = () => {
  visible.value = false;
};

/** 保存编辑 */
const save = () => {
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    const saveOrUpdate = isUpdate.value ? updateDept : addDept;
    saveOrUpdate({ ...form, parentId: form.parentId || 0 })
      .then((msg) => {
        loading.value = false;
        EleMessage.success({ message: msg, plain: true });
        handleCancel();
        emit('done');
      })
      .catch((e) => {
        loading.value = false;
        EleMessage.error({ message: e.message, plain: true });
      });
  });
};

/** 监听弹窗打开 */
watch(visible, () => {
  if (visible.value) {
    if (props.data) {
      console.log(props.data)
      assignFields({
        ...props.data,
        parentId: props.data.parentId || void 0
      });
      isUpdate.value = true;
    } else {
      resetFields();
      form.parentId = props.parentId;
      isUpdate.value = false;
    }
  }
});
</script>
